<template>
  <div class="record">
    <van-tabs v-model="active" color="#4b99fe" title-active-color="#4b99fe">
      <van-tab title="当前咨询">
        <div class="unusual" v-if="this.id&&this.flag">
          <dl>
            <dt>
              <img v-lazy="getImageUrl(obj.avatar, obj.sex)" alt />
            </dt>
            <dd>
              <p class="tou">
                {{obj.nickname}}
                <van-tag type="primary">{{obj.subordinate}}</van-tag>
                <van-tag plain type="primary" class="biaoqian">关注</van-tag>
              </p>
              <span>
                擅长疾病
                <van-tag type="danger">疑难杂症</van-tag>
                <van-tag type="danger" class="biaoqian">开颅</van-tag>
                <van-tag type="danger">刮骨</van-tag>
              </span>
            </dd>
          </dl>
          <div class="pingjia">
            <p>
              <span>
                好评率
                <b>100%</b>
              </span>
              <span>
                服务次数
                <b>2</b>次
              </span>
            </p>
            <p class="p2">
              <span class="detail_active">
                <span>￥5元</span>起
              </span>
              <van-button type="info" class="zixun" @click="onGoRoom(obj)">立刻咨询</van-button>
            </p>
          </div>
        </div>
        <dl class="zhao" v-else>
          <dt>
            <img
              src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1077085902,3089798203&fm=26&gp=0.jpg"
              alt
            />
          </dt>
          <dd>
            <p>暂无医生</p>
            <button @click="looking()">去找医生</button>
          </dd>
        </dl>
      </van-tab>
      <van-tab title="历史咨询">
        <!-- <el-card class="box-card">
          <div v-for="o in 1" :key="o" class="text item">
            <h2>
              <b>杨琦</b>
              <span>消化内科</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：匿名用户 21岁 男
              <span>2020.12.11 13:44</span>
            </p>
            <p>
              <button class="evaluate">评价</button>
              <button>查看详情</button>
            </p>
          </div>
        </el-card>

        <el-card class="box-card">
          <div v-for="o in 1" :key="o" class="text item">
            <h2>
              <b>杨琦</b>
              <span>消化内科</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：匿名用户 21岁 男
              <span>2020.12.11 13:44</span>
            </p>
            <p>
              <button class="evaluate">评价</button>
              <button>查看详情</button>
            </p>
          </div>
        </el-card>-->

        <el-card class="box-card">
          <div v-for="(items,indexs) in end" :key="indexs" class="text item">
            <h2>
              <b>{{items.nickname}}</b>
              <span>{{items.subordinate}}</span>
            </h2>
            <p>银川平安互联网医院丶成都平安健康互联网医院</p>
            <p>主诉：胃疼</p>
            <p>
              就诊人：{{endperson.username}} {{endperson.age}}岁 {{endperson.sex===0?'男':'女'}}
              <span>{{endperson.createdtime}}</span>
            </p>
            <p class="caozuo">
              <button class="evaluate">评价</button>
              <button class="evaluate">查看详情</button>
            </p>
          </div>
        </el-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { groupHistory } from "../../../../api/api/withdrawal";
import { getRecord, getDoctorInfo, getSelf } from "@/api/record";
import {
  getDoctorList,
  getImageUrl,
  inquiryStatus,
  inquiryMsg
} from "@/api/api";
import { Icon, Dialog, Toast, Search } from "vant";
import { mapState } from "vuex";
export default {
  name: "record",
  data() {
    return {
      active: 0,
      yenList: [],
      obj: {},
      endperson:{},
    };
  },
  computed: {
    ...mapState("patientStore", ["id"]),
    ...mapState("patientStore", ["flag"]),
    ...mapState("patientStore", ["endid"]),
    ...mapState("patientStore", ["end"]),
    ...mapState("patientStore", ["endperson"])
  },

  mounted() {
    console.log(this.endperson);
    getRecord().then(res => {
      this.yenList = res.data.data;
    });

    if (this.flag === false) {
      getDoctorInfo(this.id).then(result => {
        this.$store.commit("patientStore/end", result.data.data[0]);
        getSelf().then(result => {
          this.endperson=result.data.data[0];
          console.log(this.endperson);
       });
      });
    } else {
      getDoctorInfo(this.id).then(result => {
        this.obj = result.data.data[0];

      });
    }
  },
  methods: {
    getImageUrl,
    onGoRoom(data, otype = 1) {
      if (this.$store.state.patientStore.loginStatus) {
        const inquiryData = {
          doctorid: data._id,
          otype // 1图文聊天 2. 音视频聊天
        };
        console.log(inquiryData);
        inquiryStatus(inquiryData).then(res => {
          if (res.code === 200) {
            this.$router.push({
              path: `/consult/${res.data._id}`,
              query: {
                doctor_id: data._id
              }
            });
          } else if (res.code === 400) {
            Toast(res.msg);
          } else if (res.code === 10001) {
            // 有未结束的对话
            inquiryMsg(res.msg).then(result => {
              // 请求未结束对话室信息

              if (result.code === 200) {
                if (result.data[0].doctorid === data._id) {
                  // 判断聊天室中医生id和当前点击医生id是否相同
                  this.$router.push({
                    path: `/consult/${res.msg}`
                  });
                } else {
                  Dialog.confirm({
                    title: "提示",
                    message: "您有未结束的问诊会话，是否现在前往"
                  }).then(() => {
                    this.$router.push({
                      path: `/consult/${res.msg}`
                    });
                  });
                }
              }
            });
          }
        });
      } else {
        Dialog.alert({
          title: "登录提示",
          message: "您还未登录"
        }).then(() => {
          this.$router.push({
            path: "/patient/login",
            query: {
              backUrl: this.$route.path
            }
          });
        });
      }
    },
    looking() {
      this.$store.commit("patientStore/flag", true);
      this.$router.push("/detail");
    }
  }
};
</script>

<style scoped>
.xian {
  display: block;
}
.shi {
  display: none;
}
.zhao {
  position: absolute;
  left: 50%;
  margin: 0 auto;
  transform: translate(-50%, 0);
  margin-top: 1rem;
}
.zhao dt img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}
.zhao dd {
  text-align: center;
  font-size: 16px;
  line-height: 35px;
}
.zhao dd button {
  width: 1.5rem;
  background: #5daefe;
  color: #fff;
  border-radius: 0.45rem;
  border: none;
}
.van-tabs__wrap {
  width: 50%;
}

.text {
  font-size: 14px;
}

.item p,
h2 {
  padding: 8px 0;
}

.box-card {
  width: 95%;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 5px;
}

.box-card button {
  float: right;
  height: 0.3rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.2rem;
  padding: 0 0.1rem 0 0.1rem;
  margin-left: 10px;
}
.box-card h2 {
  font-size: 18px;
}
.box-card .evaluate {
  border: 1px solid #597ef7;
  color: #597ef7;
}
.pingjia .p2 {
  display: flex;
  justify-content: space-between;
}
.pingjia .p1 {
  display: flex;
}
.pingjia {
  width: 100%;
  line-height: 35px;
}
.unusual .pingjia {
  width: 100%;
  background: #fff;
}
.unusual .zixun {
  border-radius: 20px;
  width: 85px;
  height: 30px;
  font-size: 12px;
  float: right;
  background: rgb(253, 186, 0);
}
.unusual .biaoqian {
  margin: 10px;
}
.unusual dl dd {
  line-height: 40px;
}
.unusual dl .tou {
  font-size: 24px;
  font-weight: bolder;
}

.unusual .van-button--info {
  border: 0;
}
.unusual dl {
  margin-top: 10px;
  width: 100%;
  background: #fff;
  display: flex;
}
.unusual dl dt img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.header p {
  width: 100%;
  height: 45px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  padding-right: 10px;
  align-items: center;
}
.caozuo {
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.caozuo .evaluate {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>